<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="data">
    <div class="data-left">
      <div class="address">{{ address }}</div>
    </div>
    <div class="line"></div>
    <div class="data-right">
      
        <img class="weather" :src="weatherImg" @click="changeEffect()">
     
      <span @click="changeWeather()">{{ temperature }}</span>
      <font>{{ unit }}</font>
    </div>
  </div>
</template>

<script setup>
import { onMounted,ref } from 'vue';
import { getWeatherAPI } from '@/js/api/api';
const address = "渝北区";
const temperature = ref(0);
const unit = "°C";
const weatherImg = ref("./weather/clearWeather.png");
const isEffect = ref(false);
const weathers = [{
  url:"./weather/sleet.png",
  key:"雨夹雪"
},{
  url:"./weather/aegis.png",
  key:"雷"
},{
  url:"./weather/theRain.png",
  key:"雨"
},{
  url:"./weather/heavySnow.png",
  key:"雪"
},{
  url:"./weather/clearWeather.png",
  key:"晴"
},{
  url:"./weather/cloudy.png",
  key:"云"
},{
  url:"./weather/evening.png",
  key:"夜晚"
}];
let weaterNum = 1;
const changeEffect = () =>{
  isEffect.value = !isEffect.value;
  weatherImg.value = isEffect.value?"./weather/evening.png":"./weather/clearWeather.png";
  if(isEffect.value!==THREEX.baseApp.isEffect){
 // eslint-disable-next-line no-undef
 THREEX.baseApp.changeWeatherEffect(isEffect.value);
  }
}

const changeWeather =()=>{
  if(weaterNum%2){
    THREEX.baseApp.changePoint('雨')
  }else if(weaterNum%3){
    THREEX.baseApp.changePoint('雪')
  }else{
    THREEX.baseApp.changePoint()
  }
  weaterNum += 1;
}
const initData = () =>{
  getWeatherAPI().then((data)=>{
    temperature.value = parseInt(data.main.temp);
    const description = data.weather[0].description;
    console.log(`当前温度：${temperature.value} `);
    const object = weathers.find((cur)=>description.includes(cur.key))
    if(object){
      weatherImg.value = object.url
    }
    console.log(`天气描述：${description}`);  
    // eslint-disable-next-line no-undef
    THREEX.observer.trigger('CHANGE_WEATHER',description)
  })
}
onMounted(()=>{
  // eslint-disable-next-line no-undef
  THREEX.observer.on("UPDATE_HOURTES",()=>{
    initData();
  },"UPDATE_TIME")
})
</script>

<style scoped lang="less">
.data {
  color: #fff;
  // display: flex;
  // justify-content: space-around;
  text-align: center;
  // align-items: center;
  display: flex;
  // justify-content: space-around;
  width: 100%;
  text-align: center;
  display: flex;
  // justify-content: center;
  align-items: center;
  height: 6vh;
}

.data .line {
  border: 1px solid #5c8dcd;
  height: 80%;
  width: 0.2vw;
  display: inline-block;
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  margin-top: 0.2vw;
}

.data-left {
  width: 7vw;
  height: 6vh;
  background: url(@/assets/icon/address.png) no-repeat left center;
  background-size: 25%;
  line-height: 1.5vw;
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin-left: 1vw;

  .address {
    height: 6vh;
    line-height: 6vh;
    font-size: 1.5vw;
    font-family: KaiTi;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0vw;
    color: #c1e0fc;
    margin-left: 1.5vw;
    font-family: "楷体", SimSun, "Songti SC", sans-serif;
  }
}

.temperature{
  width: 0.7vw;
  height: 1.2vw;
}

.weather{
  width: 2vw;
}

.data-right {
  width: 7vw;
  height: 6vh;
  line-height: 6vh;
  color: #cdd6e3;
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-family: KaiTi;
  font-family: "楷体", SimSun, "Songti SC", sans-serif;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0vw;
  color: #c1e0fc;

  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    display: inline-block;
    font-size: 2vw;
    height: 6vh;
    line-height: 6vh;
  }

  font {
    font-size: 1vw;
    line-height: 1.5vw;
    font-family: KaiTi;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0vw;
    color: #c1e0fc;
  }
}

</style>
